<!doctype html>
<html lang="zxx" xmlns:th="http://www.thymeleaf.org">
<head>
    <div th:include="comment :: commonheader"></div>
    <!-- Title -->
    <link  rel="stylesheet" th:href="@{/assets/css/main.css}">
    <link rel="stylesheet"  th:href="@{/assets/css/sinaFaceAndEffec.css}">
    <title>编程蛙--少儿编程</title>
</head>



<div th:replace="comment :: commondiv1"></div>


<!-- Start Page Title Area -->
<div class="page-title-area bg-25">
    <div class="container">
        <div class="page-title-content">
            <h2 th:text="${obj[1].realteaname}"></h2>
            <ul>
                <li>
<!--                    <a th:href="@{index}">-->
<!--                        主页-->
<!--                    </a>-->
                </li>

                <li class="active"></li>
            </ul>
        </div>
    </div>
</div>
<!-- End Page Title Area -->

<!-- Start Single Course Area -->
<section class="single-course-area ptb-100">
    <div class="container">
        <div class="row">
            <div class="col-lg-4 col-md-8">
                <div class="teachers-left mt-50">
                    <div class="hero">
                        <img th:src="@{'/assets/img/teachers-img/' + ${obj[1].tesphoto1}} " alt="Teachers">
                    </div>
<!--                    <div class="name">-->
<!--                        <h6 th:text="${obj[1].realteaname}"></h6>-->
<!--                        <span th:text="${obj[1].teaschool}"></span>-->
<!--                    </div>-->



                </div> <!-- teachers left -->
            </div>
            <div class="col-lg-8">
                <div class="single-course-content">
                    <h3></h3>

                    <div class="row align-items-center">
                        <div class="col-lg-4 col-sm-4">
                            <div class="course-rating">
                                <img src="https://img1.baidu.com/it/u=1752617175,1775401708&fm=26&fmt=auto&gp=0.jpg" alt="Image">
                                <h4>姓名:</h4>
                                <span th:text="${obj[1].realteaname}"></span>
                            </div>
                        </div>

                        <div class="col-lg-4 col-sm-4">
                            <div class="course-rating pl-0 text-center">
                                <h4>毕业院校:</h4>
                                <p th:text="${obj[1].teaschool}"></p>
                            </div>
                        </div>

                        <div class="col-lg-4 col-sm-4">
                            <div class="course-rating star pl-0">
                                <h4>教学评分：</h4>

                                <div class="product-review">
                                    <div class="rating">
                                        <i class='bx bxs-star'></i>
                                        <i class='bx bxs-star'></i>
                                        <i class='bx bxs-star'></i>
                                        <i class='bx bxs-star'></i>
                                        <i class='bx bxs-star-half'></i>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>

                </div>

                <div class="tab single-course-tab">
                    <ul class="tabs">
                        <li>
                            <a href="#">课程预约</a>
                        </li>
                        <li>
                            <a href="#">课程目录</a>
                        </li>
                        <li>
                            <a href="#"> 个人简介</a>
                        </li>
                        <li>
                            <a href="#">教师评价</a>
                        </li>
                    </ul>

                    <div class="tab_content">
                        <div class="tabs_item">
                            <div class="body-content">
                                <table class="nov">
                                    <thead class="index">
                                    <tr>
                                        <th class="t1"><div class="d1"></div></th>
                                        <th><div>周一</div></th>
                                        <th><div>周二</div></th>
                                        <th><div>周三</div></th>
                                        <th><div>周四</div></th>
                                        <th><div>周五</div></th>
                                        <th><div>周六</div></th>
                                        <th><div>周日</div></th>

                                    </tr>
                                    </thead>
                                    <tbody class="content">
                                    <tr>
                                        <td>
                                            <p>1</p>
                                            <br>
                                            <br>
                                            8:30-9:30
                                        </td>
                                        <td><div class="kb-click"></div></td>
                                        <td><div class="kb-click"></div></td>
                                        <td><div class="kb-click"></div></td>
                                        <td><div class="kb-click"></div></td>
                                        <td><div class="kb-click"></div></td>
                                        <td><div class="kb-click"></div></td>
                                        <td><div class="kb-click"></div></td>
                                    </tr>

                                    <tr>
                                        <td>
                                            <p>2</p>
                                            <br>
                                            <br>
                                            10:30-11:30
                                        </td>
                                        <td><div class="kb-click"></div></td>
                                        <td><div class="kb-click"></div></td>
                                        <td><div class="kb-click"></div></td>
                                        <td><div class="kb-click"></div></td>
                                        <td><div class="kb-click"></div></td>
                                        <td><div class="kb-click"></div></td>
                                        <td><div class="kb-click"></div></td>
                                    </tr>

                                    <tr>
                                        <td>
                                            <p>3</p>
                                            <br>
                                            <br>
                                            12:30-14:30
                                        </td>
                                        <td><div class="kb-click"></div></td>
                                        <td><div class="kb-click"></div></td>
                                        <td><div class="kb-click"></div></td>
                                        <td><div class="kb-click"></div></td>
                                        <td><div class="kb-click"></div></td>
                                        <td><div class="kb-click"></div></td>
                                        <td><div class="kb-click"></div></td>
                                    </tr>

                                    <tr>
                                        <td>
                                            <p>4</p>
                                            <br>
                                            <br>
                                            15:30-16:30
                                        </td>
                                        <td><div class="kb-click"></div></td>
                                        <td><div class="kb-click"></div></td>
                                        <td><div class="kb-click"></div></td>
                                        <td><div class="kb-click"></div></td>
                                        <td><div class="kb-click"></div></td>
                                        <td><div class="kb-click"></div></td>
                                        <td><div class="kb-click"></div></td>
                                    </tr>

                                    <tr>
                                        <td>
                                            <p>5</p>
                                            <br>
                                            <br>
                                            17:30-18:30
                                        </td>
                                        <td><div class="kb-click"></div></td>
                                        <td><div class="kb-click"></div></td>
                                        <td><div class="kb-click"></div></td>
                                        <td><div class="kb-click"></div></td>
                                        <td><div class="kb-click"></div></td>
                                        <td><div class="kb-click"></div></td>
                                        <td><div class="kb-click"></div></td>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <div class="tabs_item">
                            <div class="curriculum-content">
                                <h3>编程基础篇</h3>

                                <div class="curriculum-list">
                                    <h4>游戏篇</h4>

                                    <ul>
                                        <li>
                                            <a href="#" class="meet-title">
                                                <i class="bx bx-right-arrow"></i>
                                                躲避小球1
                                            </a>
                                            <a href="#" class="meet-time">
                                                <span class="min">01 小时</span>
                                                <span class="preview">试看</span>
                                            </a>
                                        </li>

                                        <li class="transparent">
                                            <a href="#" class="meet-title">
                                                <i class="bx bx-right-arrow"></i>
                                                躲避小球2
                                            </a>
                                            <a href="#" class="meet-time">
                                                <span class="min">02 小时</span>
                                                <span class="preview">试看</span>
                                            </a>
                                        </li>

                                        <li>
                                            <a href="#" class="meet-title">
                                                <i class="bx bx-right-arrow"></i>
                                                躲避小球3
                                            </a>
                                            <a href="#" class="meet-time">
                                                <span class="min">01 小时</span>
<!--                                                <span class="preview">4个问题</span>-->
                                                <i class="bx bxs-lock-alt"></i>
                                            </a>
                                        </li>
                                    </ul>
                                </div>

                                <div class="curriculum-list">
                                    <h4>动画篇</h4>

                                    <ul>
                                        <li>
                                            <a href="#" class="meet-title">
                                                <i class="bx bx-right-arrow"></i>
                                                走马灯动画制作
                                            </a>
                                            <a href="#" class="meet-time">
                                                <span class="min">03 小时</span>
                                                <i class="bx bxs-lock-alt"></i>
                                            </a>
                                        </li>

                                        <li class="transparent">
                                            <a href="#" class="meet-title">
                                                <i class="bx bx-right-arrow"></i>
                                                传统节日大全
                                            </a>
                                            <a href="#" class="meet-time">
                                                <span class="min">01 小时</span>
                                                <i class="bx bxs-lock-alt"></i>

                                            </a>
                                        </li>

                                        <li>
                                            <a href="#" class="meet-title">
                                                <i class="bx bx-right-arrow"></i>
                                                小猪佩奇跳舞
                                            </a>
                                            <a href="#" class="meet-time">
                                                <span class="min">01 小时</span>
                                                <i class="bx bxs-lock-alt"></i>
                                            </a>
                                        </li>
                                    </ul>
                                </div>

                                <div class="curriculum-list">
                                    <h4>绘画篇</h4>

                                    <ul>
                                        <li>
                                            <a href="#" class="meet-title">
                                                <i class="bx bx-right-arrow"></i>
                                                百变公鸡
                                            </a>
                                            <a href="#" class="meet-time">
                                                <span class="min">30 分钟</span>
                                                <i class="bx bxs-lock-alt"></i>
                                            </a>
                                        </li>

                                        <li class="transparent">
                                            <a href="#" class="meet-title">
                                                <i class="bx bx-right-arrow"></i>
                                                彩虹波浪
                                            </a>
                                            <a href="#" class="meet-time">
                                                <span class="min">35 分钟</span>
                                                <i class="bx bxs-lock-alt"></i>
                                            </a>
                                        </li>
                                    </ul>
                                </div>

                            </div>
                        </div>

                        <div class="tabs_item">
                            <div class="instructor-content">
                                <div class="row align-items-center">
                                    <div class="col-lg-4">
                                        <div class="advisor-img">
                                            <img th:src="@{'/assets/img/teachers-img/' + ${obj[1].tesphoto1}} " alt="Teachers">
                                        </div>
                                    </div>

                                    <div class="col-lg-8">
                                        <div class="advisor-content">
                                                <p th:text="'性别：'+${obj[1].teasex}"></p>
                                            <p th:text="'教龄：'+${obj[1].teayear}"></p>

                                            <p th:text="'个人简介:&nbsp;&nbsp;' +${obj[1].tearesume}"></p>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="tabs_item">
                            <div class="review-content">
                                <div id="content" style="width: 700px; height: auto;margin:auto;">
                                    <div class="wrap">
                                        <div class="comment">
                                            <div class="head-face">
                                                <img src="https://img1.baidu.com/it/u=1752617175,1775401708&fm=26&fmt=auto&gp=0.jpg"  >
                                                <p>username</p>
                                            </div>
                                            <div class="content">
                                                <div class="cont-box">
                                                    <textarea class="text" placeholder="请输入..."></textarea>
                                                </div>
                                                <div class="tools-box">
                                                    <div class="operator-box-btn"><span class="face-icon"  >☺</span><span class="img-icon">▧</span></div>
                                                    <div class="submit-btn"><input type="button" onClick="out()"value="提交评论" /></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div id="info-show">
                                            <ul></ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>

<!-- End Single Course Area -->
<div th:include="comment :: commonscript"></div>
<script th:src="@{/assets/js/sinaFaceAndEffec.js}"></script>
<script th:src="@{/assert/js/main.js}"></script>
<script type="text/javascript">
    // 绑定表情
    $('.face-icon').SinaEmotion($('.text'));
    // 测试本地解析
    function out() {
        var inputText = $('.text').val();
        $('#info-show ul').append(reply(AnalyticEmotion(inputText)));
    }

    var html;
    function reply(content){
        html  = '<li>';
        html += '<div class="head-face">';
        html += '<img src="https://img1.baidu.com/it/u=1752617175,1775401708&fm=26&fmt=auto&gp=0.jpg" >';
        html += '</div>';
        html += '<div class="reply-cont">';
        html += '<p class="username">username</p>';
        html += '<p class="comment-body">'+content+'</p>';
        html += '<p class="comment-footer">2016年10月5日　回复　点赞54　转发12</p>';
        html += '</div>';
        html += '</li>';
        return html;
    }

</script>
<script th:inline="javascript">
    var xxx=[[${obj[2]}]];
    var divs=document.getElementsByClassName("kb-click");
    window.onload=function(){

       for(let index=0;index<35;index++){

            	if(xxx[index].state1==1&&xxx[index].state2==0){
            		let a=document.createTextNode("可预约");
            		divs[index].appendChild(a);
            		divs[index].style.backgroundColor="#32CD32";
            	}
            	else if(xxx[index].state1==0){
            		divs[index].style.backgroundColor="#818181";
            		let b=document.createTextNode("老师在忙");
            		divs[index].appendChild(b);
            	}
            	else{
            		divs[index].style.backgroundColor="#FF0000";
            		let c=document.createTextNode("不可预约");
            		divs[index].appendChild(c);
            	}
     }

 }
 for(let i=0;i<35;i++)
    {
        divs[i].onclick=function () {
            if(xxx[i].state1==1&&xxx[i].state2==0)
            {

                let teacher=[[${obj[1]}]];
                let teaid=parseInt(teacher.teaid.toString());
                i=parseInt(i.toString());
                $.post("/xuanke",{teaid:teaid,position:i},function()
                {

                    alert("预约成功");
                    divs[i].style.backgroundColor="#FF0000";
                    divs[i].innerHTML = "不可预约";

                },"json").error("请先登录再选课");
            }
            else if(xxx[i].state1==0)
            {
                alert("老师在忙噢，请挑选其他时间段吧");
            }
            else
            {
               alert("被别人抢先了,下次早点来吧！");
            }
        }
    }
</script>
</body>
</html>